<template>
  <div>
    <el-card class="main">
      <div>
        <h1>名称</h1>
      </div>
      <el-input v-model="name" placeholder="请输入食谱名称"></el-input>
      <div>
        <h1>私有</h1>
      </div>
      <el-select placeholder="请选择食材" v-model="power">
        <el-option label="仅自己可见" value="1"></el-option>
        <el-option label="所有人可见" value="2"></el-option>
      </el-select>
      <div>
        <h1>图片</h1>
      </div>
      <div class="photos">
        <div v-for="(item, i) in photos" :key="i" class="upload-pic">
          <div class="pic-node">
            <img :src="$oss + item" alt="" />
            <div class="d-btn" @click="removePhoto(i)">删除</div>
            <div class="tag" v-if="i == 0">封面图</div>
          </div>
        </div>
        <div>
          <el-upload
            :action="$uploadServer"
            :on-success="uploadPhotoSuccess"
            :show-file-list="false"
          >
            <div class="upload-pic">
              <div class="select-pic">
                <i class="el-icon-plus uploader-icon"></i>
              </div>
            </div>
          </el-upload>
        </div>
      </div>
      <div>
        <h1>描述</h1>
      </div>
      <div>
        <el-input
          type="textarea"
          :rows="6"
          class="textarea"
          v-model="jianjie"
          placeholder="请输入食谱描述，最多输入200字"
        ></el-input>
      </div>
      <div>
        <h1>食材</h1>
      </div>
      <div class="zhuliao">
        <h4>主料</h4>
        <div class="shicai" v-for="(item, i) in zhuliao" :key="i">
          <el-form :inline="true">
            <el-form-item>
              <el-select placeholder="请选择食材" filterable v-model="item.id">
                <el-option label="区域一" value="1"></el-option>
                <el-option label="区域二" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="用量" v-model="item.count"></el-input>
            </el-form-item>

            <el-form-item class="opts">
              <el-button
                type="primary"
                icon="el-icon-plus"
                circle
                @click="addZhuliao(i)"
              ></el-button>
              <el-button
                v-if="zhuliao.length > 1"
                type="danger"
                icon="el-icon-minus"
                circle
                @click="removeZhuliao(i)"
              ></el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="fuliao">
        <h4>辅料</h4>
        <div class="shicai" v-for="(item, i) in fuliao" :key="i">
          <el-form :inline="true">
            <el-form-item>
              <el-select placeholder="请选择食材" filterable v-model="item.id">
                <el-option label="区域一" value="1"></el-option>
                <el-option label="区域二" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="用量" v-model="item.count"></el-input>
            </el-form-item>

            <el-form-item class="opts">
              <el-button
                type="primary"
                icon="el-icon-plus"
                circle
                @click="addFuliao(i)"
              ></el-button>
              <el-button
                v-if="fuliao.length > 1"
                type="danger"
                icon="el-icon-minus"
                circle
                @click="removeFuliao(i)"
              ></el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div>
        <h1>筛选</h1>
      </div>
      <div>
        <el-form :inline="true">
          <el-form-item>
            <el-select placeholder="口味" filterable  v-model="taste">
              <el-option
                v-for="(val, k) in this.$gval.taste"
                :key="k"
                :label="val"
                :value="k"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select placeholder="制作难度" filterable  v-model="difficulty">
              <el-option
                v-for="(val, k) in this.$gval.difficulty"
                :key="k"
                :label="val"
                :value="k"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select placeholder="工艺" filterable  v-model="craft">
              <el-option
                v-for="(val, k) in this.$gval.craft"
                :key="k"
                :label="val"
                :value="k"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select placeholder="制作时间" filterable  v-model="duration">
              <el-option
                v-for="(val, k) in this.$gval.duration"
                :key="k"
                :label="val"
                :value="k"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <h1>步骤</h1>
      </div>
      <div class="steps">
        <div class="step-node" v-for="(item, i) in steps" :key="i">
          <h3>{{ i + 1 }}、</h3>
          <el-upload
            :action="$uploadServer"
            :on-success="(res, file) => uploadStepPicSuccess(res, file, i)"
            :show-file-list="false"
          >
            <div class="step-uploader">
              <img :src="$oss + item.pic" alt="" v-if="item.pic" />
              <div class="uploader-box" v-else>
                <i class="el-icon-plus uploader-icon"></i>
              </div>
            </div>
          </el-upload>
          <el-input
            class="step-textarea"
            type="textarea"
            v-model="item.text"
            placeholder="请输入步骤说明"
          ></el-input>
          <div class="opts">
            <el-button
              type="danger"
              icon="el-icon-minus"
              circle
              size="small"
              @click="removeStep(i)"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-top"
              circle
              size="small"
              @click="moveStepUp(i)"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-bottom"
              circle
              size="small"
              @click="moveStepDown(i)"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-plus"
              circle
              size="small"
              @click="addStep(i)"
            ></el-button>
          </div>
        </div>
      </div>
      <div>
        <h1>小窍门</h1>
      </div>
      <div>
        <el-input
          type="textarea"
          :rows="6"
          v-model="doohickey"
          placeholder="最多输入200字"
        ></el-input>
      </div>

      <el-button class="publish-btn" type="primary" @click="doPublish()"
        >发布</el-button
      >
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      power: "0",
      photos: [],
      jianjie: "",
      zhuliao: [
        {
          id: "",
          count: "",
        },
      ],
      fuliao: [
        {
          id: "",
          count: "",
        },
      ],
      duration: "",
      craft: "",
      difficulty: "",
      taste: "",
      steps: [
        {
          pic: "",
          text: "",
        },
        {
          pic: "",
          text: "",
        },
        {
          pic: "",
          text: "",
        },
      ],
      doohickey: "",
    };
  },
  methods: {
    addZhuliao(i) {
      this.zhuliao.splice(i + 1, 0, {
        id: "",
        count: "",
      });
    },
    removeZhuliao(i) {
      this.zhuliao.splice(i, 1);
    },
    addFuliao(i) {
      this.fuliao.splice(i + 1, 0, {
        id: "",
        count: "",
      });
    },
    removeFuliao(i) {
      this.fuliao.splice(i, 1);
    },
    removePhoto(i) {
      this.photos.splice(i, 1);
    },
    moveStepUp(i) {
      if (i == 0) {
        return;
      }
      const temp = this.steps[i];
      this.steps.splice(i, 1);
      this.steps.splice(i - 1, 0, temp);
    },
    moveStepDown(i) {
      if (i == this.steps.length - 1) {
        return;
      }
      const temp = this.steps[i];
      this.steps.splice(i, 1);
      this.steps.splice(i + 1, 0, temp);
    },
    removeStep(i) {
      if (this.steps.length <= 3) {
        this.$msg.error("你得保证至少有三个步骤！");
        return;
      }
      this.steps.splice(i, 1);
    },
    addStep(i) {
      this.steps.splice(i + 1, 0, {
        pic: "",
        text: "",
      });
    },
    uploadPhotoSuccess(res) {
      this.photos.push(res);
    },
    uploadStepPicSuccess(res, file, i) {
      this.steps[i].pic = res;
    },
    doPublish() {
      this.$msg.success("发布成功");
      this.$router.push("/user/me/shipu");
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 960px;
  margin: 0 auto;
  .photos {
    display: flex;
    flex-wrap: wrap;
    .select-pic {
      position: relative;
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: center;
      border: 2px dashed #eee;
      align-items: center;
      font-size: 30px;
      color: #eee;
      border-radius: 3px;
      transition: all 0.3s;
      &:hover {
        color: #fabc2a;
        cursor: pointer;
        border: 2px dashed #fabc2a;
      }
    }
    .upload-pic {
      width: 200px;
      height: 200px;
      padding: 10px;
      // background-color: yellowgreen;
      position: relative;
      .pic-node {
        width: 100%;
        height: 100%;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 3px;
        }
        .d-btn {
          position: absolute;
          top: 0;
          right: 0;
          opacity: 0;
          transition: 0.5s all;
          background-color: #000;
          color: #fff;
          padding: 5px;
        }
        .tag {
          position: absolute;
          top: 0;
          left: 0;
          background-color: #fabc2a;
          color: #fff;
          padding: 5px;
        }
        &:hover {
          .d-btn {
            opacity: 1;
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .shicai {
    .opts {
      transition: 0.5s all;
      opacity: 0;
    }
    &:hover {
      .opts {
        opacity: 1;
      }
    }
  }
  .steps {
    .step-node {
      display: flex;
      margin: 10px 0;
      .step-uploader {
        height: 150px;
        width: 150px;
        border-radius: 4px;
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
        .uploader-box {
          position: relative;
          display: flex;
          width: 100%;
          height: 100%;
          justify-content: center;
          border: 2px dashed #eee;
          align-items: center;
          font-size: 30px;
          color: #eee;
          border-radius: 3px;
          transition: all 0.3s;
          &:hover {
            color: #fabc2a;
            cursor: pointer;
            border: 2px dashed #fabc2a;
          }
        }
      }

      &:hover {
        .opts {
          opacity: 1;
        }
      }

      img {
        height: 150px;
        width: 150px;
        border-radius: 4px;
        object-fit: cover;
      }
      .step-textarea {
        margin-left: 10px;
        width: 500px;
        /deep/.el-textarea__inner {
          height: 150px;
        }
      }
      .opts {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        opacity: 0;
        transition: 0.5s all;
        .el-button {
          margin-left: 10px;
          & + .el-button {
            margin-top: 5px;
          }
        }
      }
    }
  }

  .publish-btn {
    width: 100%;
    margin: 10px 0;
  }
  // .textarea {

  // }
}
</style>

